<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #1a2128;
        }

        .big {
            width: 1200px;
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .top {
            width: 100%;
            height: 600px;
            background-image: url(./星之守护者.jpg);
            background-size: 100% 600px;
        }

        .ss {
            width: 200px;
            height: 25px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            margin-top: 15px;
            background-color: transparent;
            border: 1px solid saddlebrown;
            color: white;
        }

        li {
            width: 180px;
            color: white;
            list-style: none;
            margin-top: 60px;
            text-align: center;
            float: left;
            margin-left: 20px;
            border: 1px solid #666;
            transition: all .5s;
        }

        li:hover {
            transform: translate(0, -10px);
        }

        ul li img {
            width: 100%;
            height: 180px;
            border-bottom: 1px solid #999;
        }

        .mtk {
            width: 500px;
            height: 500px;
            background-color: white;
            position: fixed;
            left: 0;
            top: 200px;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
        }

        .mtk p {
            margin: 20px;
        }

        .cha {
            float: right;
        }

        .xia {
            border-top: 1px solid black;
            width: 500px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top"></div>
        <p><span class="ssk"><input type="text" class="ss" placeholder="检索"></span></p>
        <ul>
            <!-- <li>
                <img src="./angel.gif" alt=""><br>
                <span>angel</span>
            </li> -->

        </ul>
        <div class="mtk">
            <p><span class="xm">不灭狂雷沃利贝尔</span><span class="cha">×</span></p>
            <div class="xia" style="display: flex;">
                <img style="margin: 15px; width: 150px;height: 150px;" class="tp" src="./angel.gif" alt="">
                <div>
                    <p style="width: 255px;">
                    <p class="atk" style="font-size: 13px; width: 100%;height: 20px;background-color: aqua;">攻击</p>
                    </p>
                    <p style="width: 255px;">
                    <p class="def" style="font-size: 13px; width: 100%;height: 20px;background-color: rgb(81, 117, 226);">防御</p>
                    </p>
                    <p style="width: 255px;">
                    <p class="mag" style="font-size: 13px; width: 70%;height: 20px;background-color: rgb(15, 157, 222);">魔法</p>
                    </p>
                    <p style="width: 255px;">
                    <p class="dif" style="font-size: 13px; width: 10%;height: 20px;background-color: rgb(205, 65, 15);">难度</p>
                    </p>
                </div>
            </div>
            <div>
                <p>拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩--安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来--最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯--那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人
                </p>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./axios.min.js"></script>
<script>
    var ul = document.querySelector('ul')
    var big = document.querySelector('.big')
    function render(zt) {
        var status = zt ? zt : ""
        axios.get('https://hmajax.itheima.net/api/lol/search').then(res => {
            if (status) {
                let arr = zt
                let brr = arr.map((ele, index) => {
                    return `
                    <li data-id=${ele.heroId}>
                        <img src="${ele.icon}" alt=""><br>
                        <span>${ele.title}</span>
                    </li>
                    `
                }).join('')
                ul.innerHTML = brr
            } else {
                let arr = res.data.data
                let brr = arr.map((ele, index) => {
                    return `
                    <li data-id=${ele.heroId}>
                        <img src="${ele.icon}" alt=""><br>
                        <span>${ele.title}</span>
                    </li>
                    `
                }).join('')
                ul.innerHTML = brr
            }
        })
    }
    render()
    big.addEventListener('input', function (e) {
        if (e.target.className == 'ss') {
            let data = e.target.value
            axios.get(`https://hmajax.itheima.net/api/lol/search?q=${data}`).then(res => {
                var sj = res.data.data
                render(sj)
            })
        }
    })
    var mtk = document.querySelector('.mtk')
    big.addEventListener('click', function (e) {
        var id = e.target.parentNode.dataset.id
        axios.get(`https://hmajax.itheima.net/api/lol/info?id=${id}`).then(res => {
            var gj = res.data.data.hero.attack
            var name = res.data.data.hero.name
            var title = res.data.data.hero.title
            var fy = res.data.data.hero.defense
            var mf = res.data.data.hero.magic
            var nd = res.data.data.hero.difficulty
            var icon = res.data.data.hero.icon
            
            document.querySelector('.tp').src=icon
            document.querySelector('.xm').innerHTML=name+title
            document.querySelector('.atk').style.width=gj+'0%'
            document.querySelector('.def').style.width=fy+'0%'
            document.querySelector('.mag').style.width=mf+'0%'
            document.querySelector('.dif').style.width=nd+'0%'
            mtk.style.display = 'block'


        })

    })
</script>